<template>
	<view>
		<view class="top">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="topbox">
				<image :src="data.goods[0].image" mode="" style="width: 144rpx;height: 144rpx;"></image>
				<view class="box-sp">
					<view class="box-top">
						{{data.goods[0].title}}
					</view>
					<view class="box-main">
						<view class="box-tx">
							{{data.goods[0].difference}}
						</view>
						<view class="box-num">
							× {{data.goods[0].number}}
						</view>
					</view>
					
				</view>
			</view>
			<view class="main">
				<view style="width: 100%;height: 2rpx;"></view>
				<uv-textarea 
				v-model="value" 
				count 
				placeholder="请输入内容" 
				height='256rpx' 
				border='none'
				maxlength='200'
				></uv-textarea>
				
				<view class="main-tp">
					<u-upload 
					ref="AcrossImguUpload"  
					width="158rpx" 
					height="158rpx" 
					max-count="8" 
					:action="uploadUrl" 
					:header="uploadHeader" 
					:file-list="recyclerAcrossImgLst" 
					@on-success="handleUploadSuccess"
					></u-upload>
					<view class="uploadtitle" v-if="flag">
						最多可上传8张照片
					</view>
				</view>
				
				<view class="star">
					<view class="star1">
						<view class="star-sp">
							商品评分
						</view>
						<u-rate :count="count3" v-model="value3" active-color="#FEB74D" inactive-color="#b2b2b2" gutter="20" class="star-star"></u-rate>
						<view class="star-sp" style="margin-left: 10rpx;text-align: right;">
							{{value3 >4?'非常满意':value3>3?'满意':value3>2?'一般':'差评'}}
						</view>
					</view>
					<view class="star1">
						<view class="star-sp">
							物流服务
						</view>
						<u-rate :count="count1" v-model="value1" active-color="#FEB74D" inactive-color="#b2b2b2" gutter="20" class="star-star"></u-rate>
						<view class="star-sp" style="margin-left: 10rpx;text-align: right;">
							{{value1 >4?'非常满意':value1>3?'满意':value1>2?'一般':'差评'}}
						</view>
					</view>
					<view class="star1">
						<view class="star-sp">
							服务态度
						</view>
						<u-rate :count="count2" v-model="value2" active-color="#FEB74D" inactive-color="#b2b2b2" gutter="20" class="star-star"></u-rate>
						<view class="star-sp" style="margin-left: 10rpx;text-align: right;">
							{{value2 >4?'非常满意':value2>3?'满意':value2>2?'一般':'差评'}}
						</view>
					</view>
				</view>
			</view>
			<view class="isname" @click="isname = !isname">
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/no%402x.png" mode="" class="isname2" v-if="!isname"></image>
				<image src="https://yhflsyz.oss-cn-guangzhou.aliyuncs.com/shoping/yes%402x.png" mode="" class="isname2" v-else></image>
				<view class="isname1">
					匿名评价
				</view>
			</view>
		</view>
		<view class="bottom">
			<view style="width: 100%;height: 1rpx;"></view>
			<view class="btn" @click="submitRecycler">
				提交评价
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:[],
				value: '',
				uploadUrl: this.$u.api.user.getUploadUrl(),
				uploadHeader: this.$u.api.user.getUploadHeader(),
				recyclerAcrossImgLst: [],
				flag:true,
				isname:false,
				count3: 5,
				value3: 5,
				count1: 5,
				value1: 5,
				count2: 5,
				value2: 5
			}
		},
	
		
		onLoad(option) {
		this.$u.api.shop.getOrderInfo({id:option.order_id}).then(res =>{
			if(res.code == 1){
				this.data = res.data
			}
		})
		
			
		},
		methods:{
			
		handleUploadSuccess(){
			this.flag = false
		},
			submitRecycler(){
				let AcrossImg = [];
				let hasUploadAcross = false
				this.$refs.AcrossImguUpload.lists.forEach(item => {
					if(item.progress < 100){
						hasUploadAcross = true
						return true
					}
					if(item?.response == undefined && item?.url){
						AcrossImg = item.url
						return true
					}
						 
					if((item?.response?.status != 200 || item?.response?.data == undefined || item?.response?.data == '')){
						return true
					}
					AcrossImg.push(item.response.data)
				})
				if(hasUploadAcross){
					this.$u.toast('有图片正在上传，请耐心等待')
					return false
				}
				this.recyclerAcrossImg = AcrossImg
				let obj = {
					order_id:this.data.id,
					goodsList:JSON.stringify([
						{
							goods_id:this.data.goods[0].goods_id,
							state:1,
							comment:this.value,
							difference:this.data.goods[0].difference,
							images:this.recyclerAcrossImg,
							id:this.data.goods[0].id,
							score_describe:this.value3,
							score_logistics:this.value1,
							score_service:this.value2,
							switch:this.isname?1:0
						}
					]),
				}
				this.$u.api.shop.commentOrder(obj).then(res =>{
					console.log(res);
					if(res.code == 1){
						uni.showToast({
						    title: '评论成功！',
						    icon: 'success'
						})
						setTimeout(() =>{
							uni.navigateBack({
							    delta: 1,
							})
						},1000)
					}else{
						uni.showToast({
						    title: res.msg,
						    icon: 'none'
						})
						setTimeout(() =>{
							uni.navigateBack({
							    delta: 1,
							})
						},1000)
					}
				}).catch(req =>{
					uni.showToast({
					    title: req.msg,
					    icon: 'none'
					})
					setTimeout(() =>{
						uni.navigateBack({
						    delta: 1,
						})
					},1000)
				})
			}
		}
	}
</script>

<style>
	.top{
		width: 690rpx;
		height: 204rpx;
		background-color: white;
		border-radius: 16rpx;
		margin-left: 30rpx;
	}
	.topbox{
		width: 630rpx;
		height: 144rpx;
		margin-left: 30rpx;
		display: flex;
		margin-top: 29rpx;
	}
	.box-sp{
		width:470rpx;
		height: 144rpx;
		margin-left: 16rpx;
		position: relative;
	}
	.box-top{
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 28rpx;
		color: #1F2921;
		font-weight: bold;
	}
	.box-main{
		width: 100%;
		margin-top:24rpx;
		font-size: 24rpx;
		color: #888888;
		display: flex;
		justify-content: space-between;
	}
	.main{
		width: 690rpx;
		/* height: 758rpx; */
		border-radius: 16rpx;
		background-color: white;
		margin-top: 50rpx;
		
	}
	.main-tp{
		width: 630rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;
		position: relative;
	}
	.uploadtitle{
		position: absolute;
		top: 70rpx;
		right: 170rpx;
		font-size: 24rpx;
		color: #CBCBCB;
	}
	.star{
		width: 630rpx;
		height: 224rpx;
		margin-left: 30rpx;
		margin-top: 26rpx;
		border-top: 1rpx solid #EEEEEE;
	}
	.star1{
		width: 100%;
		height: 40rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.star-sp{
		width: 124rpx;
		height: 24rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #1F2921;
	}
	.star-star{
		width:360rpx;
		height: 40rpx;
		margin-left: 10rpx;
	}
	.bottom{
		width: 100%;
		height: 136rpx;
		position: fixed;
		bottom: 0;
	}
	.btn{
		width: 690rpx;
		height: 88rpx;
		margin-left: 30rpx;
		margin-top: 19rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #36BE6A;
		color: white;
		border-radius: 44rpx;
	}
	.isname{
		width: 690rpx;
		height: 32rpx;
		line-height: 32rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	
	}
	.isname2{
		width: 32rpx;
		height: 32rpx;
	}
</style>